<?php /*a:7:{s:76:"C:\xampp64-php5\htdocs\tp5\application\index\view\index\business_canvas.html";i:1583997026;s:61:"C:\xampp64-php5\htdocs\tp5\application\index\view\layout.html";i:1589270040;s:68:"C:\xampp64-php5\htdocs\tp5\application\index\view\public\header.html";i:1589790292;s:77:"C:\xampp64-php5\htdocs\tp5\application\index\view\index\canvas_structure.html";i:1590324585;s:85:"C:\xampp64-php5\htdocs\tp5\application\index\view\index\business_canvas_template.html";i:1584430900;s:67:"C:\xampp64-php5\htdocs\tp5\application\index\view\public\float.html";i:1587261223;s:68:"C:\xampp64-php5\htdocs\tp5\application\index\view\public\footer.html";i:1589016654;}*/ ?>
<div>
    <div class="my_container">
        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/homePage.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/tooltip.css" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>


</head>

<body>
    <div class="top">
        <div class="name">
            <a style="text-decoration: none;" href="<?php echo url('index/getHomePage'); ?>">
                <img src="http://localhost/tp5/public/img/header/logo.png" style="width:8em">
                <!--火花设计思维分享-->
            </a>
        </div>
        <?php if(!isset($_COOKIE['user'])): ?>
        <div class="login" style="margin-left: 50%;"><a href="<?php echo url('index/login'); ?>" style="font-size: 20px;">登录</a></div>
        <div class="register"><a href="<?php echo url('index/register'); ?>" style="font-size: 20px;">注册</a></div>

        <?php else: ?>

        <!--添加成员的消息通知-->
        <div onclick="window.location.href='<?php echo url('index/showPrjMemRequests'); ?>'" class="request_banner" style="display: none;"></div>


        <div class="login"><a id="header_projects" href="<?php echo url('index/getProjects',array('userId'=>$_COOKIE['user'])); ?>" style="font-size: 20px;">项目小组</a></div>


        <div class="register"><a id="header_methods" href="<?php echo url('index/getDesignMethods'); ?>" style="font-size: 20px;">设计方法</a></div>
        <div class="register"><a id="header_cases" href="<?php echo url('index/getPublicCanvasLists'); ?>" style="font-size: 20px;">创意社区</a></div>
        <div class="register"><a id="header_ques" href="<?php echo url('index/getSingleQuesBank'); ?>" style="font-size: 20px;">题库练习</a></div>


        <div class="welcome_banner" style="z-index:105;" onmouseover="$('#logout').show()" onmouseout="$('#logout').hide()">
            <svg style="margin-left:65px;" t="1573030732563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2246" width="40" height="40">
                <path d="M512 950.857143c241.371429 0 438.857143-197.485714 438.857143-438.857143s-197.485714-438.857143-438.857143-438.857143-438.857143 197.485714-438.857143 438.857143 197.485714 438.857143 438.857143 438.857143z m0 73.142857c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z" fill="#e45440" p-id="2247">

                </path>
                <text x="50%" y="65%" style="fill:#e45440;font-size:550px;text-anchor: middle;">
                    <?php echo iconv_substr($_COOKIE['username'],0,1); ?>
                </text>
            </svg>


            <div id="logout">
                <div class="logout_top">
                    <text class="logout_user"><?php echo htmlentities($_COOKIE['username']); ?></text>
                    <br>
                    <text class="logout_id">ID: <?php echo htmlentities($_COOKIE['user']); ?></text>
                </div>

                <div class="logout_option">
                    <a href="<?php echo url('index/showPrjMemRequests'); ?>">我的消息</a>
                </div>

                <div class="logout_option">
                    <a href="<?php echo url('index/logout'); ?>">登出</a>
                </div>

                <div style="height: 6px;width: 100%;border-radius: 4px;"></div>
            </div>

            <svg style="float: right;margin-right: 30px;" t="1573118997341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" width="15" height="40"><path d="M972.838375 233.161725c15.319322 15.477939 27.804007 28.100774 43.005646 43.46103-167.688762 171.229501-334.75329 341.814301-503.593304 514.220637C343.610253 619.265957 176.069875 448.809074 8.155979 277.978674c15.140239-13.528486 28.904092-25.828971 36.456303-32.582981C102.486983 299.970139 164.429441 355.920971 223.562844 414.706441c90.002299 89.475281 178.423545 180.552081 266.599191 271.833548 16.09194 16.659891 25.511737 17.96976 42.483746 0.450267 139.874522-144.366961 280.757028-287.756638 421.235317-431.540299C960.33834 248.844331 965.900165 241.36887 972.838375 233.161725z" p-id="2176"></path></svg>

        </div>
        <?php endif; ?>
    </div>
    <!--
<?php if(!isset($_COOKIE['user'])): ?>
<a href="<?php echo url('index/login'); ?>">登录</a>
<?php else: ?><a href="<?php echo url('index/logout'); ?>">登出</a>
<a href="<?php echo url('index/getProjects',array('userId'=>$_COOKIE['user'])); ?>">项目</a>
<?php endif; ?>-->

    <script>
        $.ajax({
            type: "GET",
            url: "http://localhost/tp5/public/index.php/index/index/getPrjMemRequests",
            data: {},
            xhrFields: {
                withCredentials: true
            },
            //crossDomain: true,
            success: function(result) {
                if (result != null && (result.request_list.length > 0 || result.reject_list.length > 0)) {
                    $(".request_banner").show();
                    $(".request_banner").html("<a style='cursor: pointer;'>-您有" + (result.request_list.length + result.reject_list.length) + "条消息-</a>");
                }
            }
        });

        /*$.get('http://localhost/tp5/public/index.php/index/index/getPrjMemRequests',{},function (result) {
            if(result != null && ( result.request_list.length > 0 || result.reject_list.length > 0) ) {
                $(".request_banner").show();
                $(".request_banner").html("<a>-您有" + ( result.request_list.length + result.reject_list.length ) + "条消息-</a>");
            }
            //$(".request_banner").load(location.href + " .request_banner");
        });*/
    </script>
</body>

</html> <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/businessCanvas.css" />



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://localhost/tp5/public/JS/html2canvas.js"></script>
    <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
    <link href="http://localhost/tp5/public/CSS/cover_layer.css" rel="stylesheet"/>
    <link href="http://localhost/tp5/public/CSS/general.css" rel="stylesheet"/>
    <link href="http://localhost/tp5/public/CSS/canvas_structure.css" rel="stylesheet"/>
    <script src="http://localhost/tp5/public/JS/toastr.js"></script>
    <script src="http://localhost/tp5/public/JS/cookie_operation.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <script src="http://localhost/tp5/public/JS/digit.js"></script>
</head>
<body>


<?php if(isset($_COOKIE['user'])): ?>


<!--<button onclick="exportRecords('<?php echo htmlentities($toolId); ?>')">导出画布</button>-->
<!-- ↑ 废弃：AJAX请求后台下载文件时，输出文本型数据，无法调用浏览器下载机制-->

<div id="work_top_window" style="z-index:101;position:absolute;width:100%;height:70px;background-color: #f9f9f9;border-bottom: 1px solid rgba(94, 94, 94, 0.767);min-width: 900px;">
    <!--项目名称part-->
    <div style="float: left;">
        <div  style="font-size: 28px;margin-left: 20px;">
            <div class="return_btn" onclick="location.href='<?php echo url('index/getTools',array('prjId'=>$prjInfo['prj_id'])); ?>'" style="cursor: pointer; float:left;margin:3px 15px 0 0;background-image:linear-gradient(#ffffff,#eeeeee);padding:0 15px;">
                <img style="width:24px;height: 24px;" src="http://localhost/tp5/public/img/return.png">
            </div>
            <span><?php echo htmlentities($prjInfo['tool_type']); ?></span>
            <!--<text>(来自小组:<?php echo htmlentities($prjInfo['prj_name']); ?>)</text>-->
        </div>
    </div>

    <!--自动保存提示语句part-->
    <div id="auto_save" style="position: absolute;top:45px;right:300px;color: #838282;font-weight: 300;">
        [修改将自动保存]
    </div>

    <!--项目成员part-->
    <div style="margin-top:10px;position:absolute;top:22px;left:270px;font-size: 18px;color:#666666;">

        <?php if(is_array($prjMembers) || $prjMembers instanceof \think\Collection || $prjMembers instanceof \think\Paginator): $i = 0; $__LIST__ = $prjMembers;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$p): $mod = ($i % 2 );++$i;if($p['id']==$prjInfo['creator_id']): ?>
        <div class="tooltip_left " style="float: none;">
            <svg style="fill:#d81e06" t="1573030732563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2246" width="30" height="30">
                <path d="M512 950.857143c241.371429 0 438.857143-197.485714 438.857143-438.857143s-197.485714-438.857143-438.857143-438.857143-438.857143 197.485714-438.857143 438.857143 197.485714 438.857143 438.857143 438.857143z m0 73.142857c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z"  p-id="2247">

                </path>
                <text x="50%" y="65%" style="font-size:550px;text-anchor: middle;">
                    <?php echo iconv_substr($p['usr_name'],0,1); ?>
                </text>
            </svg>
            <span class="tooltiptext_left"><?php echo htmlentities($p['usr_name']); ?></span>
        </div>
        <!--<b>(创建者)&nbsp;&nbsp;</b>-->

        <?php else: ?>
        <div class="tooltip_left " style="float: none;">
            <svg style="fill:#8198ff;" t="1573030732563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2246" width="30" height="30">
                <path d="M512 950.857143c241.371429 0 438.857143-197.485714 438.857143-438.857143s-197.485714-438.857143-438.857143-438.857143-438.857143 197.485714-438.857143 438.857143 197.485714 438.857143 438.857143 438.857143z m0 73.142857c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z" p-id="2247">
                </path>
                <text x="50%" y="65%" style="font-size:550px;text-anchor: middle;">
                    <?php echo iconv_substr($p['usr_name'],0,1); ?>
                </text>
            </svg>

            <span class="tooltiptext_left"><?php echo htmlentities($p['usr_name']); ?></span>
        </div>
        <?php endif; ?>
        <?php endforeach; endif; else: echo "" ;endif; ?>


        <span style="font-size: 13px;color: #838282;font-weight: 300;">(管理小组成员请返回上一页面)</span>
    </div>

    <!--导出part-->
    <div id="export_part" onmouseover="$('#export_selection').show();" onmouseout="$('#export_selection').hide();" style="z-index:80;float:right;height:50px;width:50px;position: relative;margin-top: 15px;margin-right: 5px;">
        <i class="el-icon-download" style="font-size: 30px;cursor: pointer;"></i>
        <text>导出</text>

        <div id="export_selection" style="display:none;position: absolute;right:4px;top:50px;">
            <div style="background-color: #f9f9f9;width: 55px;height: 77px;box-shadow: 1px 1px 2px #bebebe, -1px 1px 2px #bebebe;">

                <form action="<?php echo url('index/exportRecords'); ?>" method="post">
                    <input type="hidden" name="toolId" value="<?php echo htmlentities($toolId); ?>">
                    <button type="submit" style="color: #000;background-color: #f9f9f9;border-radius: 0;width: 55px;padding: 2px;margin: 10px 0px;">
                        <i class="el-icon-document" style="font-size: 20px;cursor: pointer;">txt</i>
                    </button>
                </form>

                <button onclick="canvasScreenShoot()" style="color: #000;background-color: #f9f9f9;border-radius: 0;width: 55px;padding: 2px;margin: 0;">
                    <i class="el-icon-picture-outline" style="font-size: 18px;cursor: pointer;">png</i>
                </button>

            </div>
        </div>
    </div>


    <!--帮助part-->
    <div  class="tooltip" style="z-index:80;float:right;height:50px;width:50px;margin-right:5px;margin-top: 15px;position: relative;">
        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <i class="el-icon-question" onclick="gonggantu_help_1()" style="font-size: 30px;cursor: pointer;"></i>
        <?php else: ?>
        <i class="el-icon-question" style="font-size: 30px;cursor: pointer;"></i>
        <?php endif; ?>
        <text>帮助</text>

        <div class="tooltiptext" style="font-size: 14px;text-align: left;"><!--查看此设计工具的使用帮助-->

            <?php if($prjInfo['tool_type'] == '共感图'): ?>
            1、首先：确定目标用户；
            <br>2、接着：分析目标用户的所想、所听、所见、所说；
            <br>3、最后：总结目标用户的痛点和需求点。
            <br>4、选中某一便利贴后可以拖动更换区域，删除的非空白便利贴可以在回收站找回；
            <br>5、便利贴上方进度条显示该条内容在组内的通过情况。
            <?php endif; if($prjInfo['tool_type'] == '商业模式画布'): ?>
            删除的非空白便利贴可以在回收站找回
            <?php endif; if($prjInfo['tool_type'] == '四象限法'): if($sixiangxian_type=='可行性——价值'): ?>
                1、输入“需要解决的问题是什么”；
                <br>2、根据问题，创建想法；
                <br>3、所有成员完成上一步后，参照屏幕右侧坐标示例图，拖拽想法到对应“象限”；
                <br>4、最终留在第一象限的想法是当前最优的。
                <br>5、删除的非空白便利贴可以在回收站找回。
                <?php endif; if($sixiangxian_type=='紧急度——重要性'): ?>
                1、输入“需要解决的问题是什么”；
                <br>2、根据问题，创建想法；
                <br>3、所有成员完成上一步后，参照屏幕右侧坐标示例图，拖拽想法到对应“象限”；
                <br>4、最终留在第一象限的想法是需要立即搞定的。
                <br>5、删除的非空白便利贴可以在回收站找回。
                <?php endif; ?>
            <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
            1、首先确定目标用户及其对应的主要痛点和需求点（如果已经完成共感图，可依照）；
            <br>2、其次以“我们应该如何”的句式开头拓展需要解决的问题。
            <br>3、可评论便利贴。
            <br>4、删除的非空白便利贴可以在回收。
            <?php endif; ?>
        </div>
    </div>



    <!--公开画布part，只有共感图和四象限能够-->
    <?php if($prjInfo['tool_type'] == '四象限法' OR $prjInfo['tool_type'] == '共感图'): ?>
    <div class="tooltip" style="float:right;height:50px;width:50px;position: relative;margin-right: 10px;margin-top: 15px;">

        <?php if($prjInfo['is_public'] == 'N'): ?>
            <i class="el-icon-circle-check" onclick="makeCanvasPublic('<?php echo htmlentities($toolId); ?>')" style="font-size: 30px;cursor: pointer;"></i>
            <text>公开</text>
            <span class="tooltiptext">公开此画布到创意社区，<br>其他人就可以为你们的想法投票哦</span>

        <?php else: ?>
            <i class="el-icon-remove-outline" onclick="makeCanvasPrivate('<?php echo htmlentities($toolId); ?>')" style="font-size: 30px;cursor: pointer;"></i>
            <span class="tooltiptext">撤销公开，并从创意社区中移除<br>恢复到仅限于组内使用的状态</span>
            <text >隐藏</text>
        <?php endif; ?>
        
    </div>
    <?php endif; ?>



    <!--回收站part-->
    <div id="recycle_bin_part" style="float:right;height:50px;width:50px;position: relative;margin-right: 25px;margin-top: 10px;" >
        <i class="el-icon-delete" onclick="if($('#recycle_bin_window').css('display')=='none'){showRecycleWin();}else{$('#recycle_bin_window').hide();}" style="font-size: 35px;cursor: pointer;"></i>
        <text style="margin-left: -5px;">回收站</text>

        <div id="recycle_bin_window" style="z-index:99;display:none;position:absolute;right:100%;border: solid gray;width: 300px;background-color: lightgray;min-height: 100px;max-height:400px;overflow-y:scroll;">

        </div>
    </div>

    <canvas id="clock_canvas" style="width:150px;position: absolute;right: 280px;top:8px;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>


</div>


<?php if(isset($ques_info) AND sizeof($ques_info) > 0): ?>
<div style="height: 80px;margin-top: 90px;text-align: center;">
<div style="padding: 30px 0;font-size: 22px;">
    <span style="padding:3px;background-color: #e8e8e8;">&nbsp;<?php echo htmlentities($ques_info['ques_type']); ?>&nbsp;|&nbsp;<?php echo htmlentities($ques_info['content']); ?></span>
</div>
</div>
<?php else: ?>
<div style="height: 0px;margin-top: 90px;"></div>
<?php endif; ?>


<div id="comments_window" style="display:none;position: fixed;left: 500px;z-index: 110;background-color:white;width:260px;min-height:55px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);">
    <div style="padding: 10px 10px;background: linear-gradient(0deg, #fafafa, #f8f8f8);box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);">评论便利贴：
        <span onclick="$('#comments_window').hide();" style="float:right;cursor: pointer;font-size: 12px;color: #a2a2a2;">×关闭评论</span>
        <br>
        <span id="record_contents_for_comment" style="word-break: break-word;"></span>
    </div>

    <div style="max-height:250px;overflow:auto;">
        <div id="show_comments_div" style="padding:0 10px; ">
        <!--点击评论按钮后ajax查询，显示在此区域-->

        </div>
    </div>

    <div style="background: #cccccc;height: 1px;margin: 5px 10px;"></div>

    <div style="height:60px;padding: 10px 10px;">
        <textarea maxlength="50" style="overflow-y:auto;width: 100%;" placeholder="按enter发送，shift+enter换行，最多50字" id="new_comment"></textarea>
        <input type="hidden" id="record_id_for_comment">

        <div class="button button-action" style="line-height: 26px;padding: 0px 0px;font-size: 12px;height: 26px;float:right;cursor: pointer;width: 50px;" onclick="sendRecordComments();">发送</div>
        <div class="button" style="margin-right:10px;line-height: 26px;padding: 0px 0px;font-size: 12px;height: 26px;float:right;cursor: pointer;width: 50px;" onclick="$('#comments_window').hide();">取消</div>
    </div>
</div>


<!-- 遮罩层 -->
<div id="cover" class="cover"></div>

<!-- 删除评论弹窗 -->
<div id="showdiv_delCmt" class="showdiv" style="position:fixed;width: 460px;height: 200px;left: 35%;">
    <!-- 标题 -->
    <div class="showdiv_title" style="">
        删除评论
    </div>

    <div style="text-align: center;margin: 30px 0;">
        确认要永久删除该评论吗？
    </div>

    <input type="hidden" id="cmt_id_for_del">

    <div class="button button-medium " onclick="$('#showdiv_delCmt').hide();
            $('#cover').css('display','none');" style="position: absolute;left: 25%;top: 70%;" >
        取消</div>
    <div  id="next_step_btn" onclick="$('#showdiv_delCmt').hide();
            $('#cover').css('display','none');
            delRecordCmt($('#cmt_id_for_del').val());" class="button button-medium button-caution" style="position:absolute;left: 55%;top: 70%;">
        确认</div>
</div>




<div id="wholeCanvas" style=""><!--closing tag在business_canvas等3个单独的html里写-->


<?php endif; ?>

    <script>

        $('#header_projects').css('border-bottom','solid 2px #000000');
        $('#header_projects').css('font-weight','bold');



        //var haveEditedRecords = new Array();

        //记录打开页面的时间
        window.onload = function () {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/addUserHistory",
                data: {
                    userId: "<?php echo htmlentities($_COOKIE['user']); ?>",
                    bh_type: "open",
                    toolId: '<?php echo htmlentities($toolId); ?>'
                },
                success: function (result) {
                    //console.log(result);
                }
            })
        };


        /*window.onbeforeunload = function () {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/addUserHistory",
                data: {
                    userId: "<?php echo htmlentities($_COOKIE['user']); ?>",
                    bh_type: "edit",
                    recordId: haveEditedRecords
                },
                success: function (result) {
                    //console.log(result);
                }
            })
        };*/


        //关闭页面的时间
        window.onunload = function () {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/addUserHistory",
                data: {
                    userId: "<?php echo htmlentities($_COOKIE['user']); ?>",
                    bh_type: "close",
                    toolId: '<?php echo htmlentities($toolId); ?>'
                },
                success: function (result) {
                    //console.log(result);
                }
            })
        };


        //回车事件绑定
        $("#new_comment").bind("keydown",function (event) {
            if (event.keyCode == "13" && !event.shiftKey) {
                // 禁止换行
                event.cancelBubble = true;//适用于IE
                event.preventDefault();
                event.stopPropagation();

                sendRecordComments();
            }
        });


        //画布的  信息上边栏  随滚动条移动自动到达屏幕顶端
        var _box_y = $("#work_top_window").offset().top;
        $(window).scroll(function(){
            if($(window).scrollTop() > _box_y){
                $("#work_top_window").css("top",$(window).scrollTop()+"px");
                $("#work_top_window").css("z-index",101);
            }else{
                $("#work_top_window").css("top",_box_y);
            }
        });

        //点击任意位置，回收站窗口隐藏
        $(document).click(function(e){
            var _con = $('#recycle_bin_part');   // 设置目标区域

            if(!_con.is(e.target) && _con.has(e.target).length === 0){
                $('#recycle_bin_window').hide();
            }


        });


        //web socket监听，监控即时性修改
        /*——监听代码开始——*/
        var ws = new WebSocket('ws://152.136.128.96:7080');

        ws.onopen = function (e) {             //连接建立时触发函数
            console.log('Connection to server opened ' + ws.readyState);
        };

        ws.onmessage = function (evt) {       //客户端接收服务端数据时触发
            //获取当前页面的toolId
            var elems = window.location.href.split('/');
            var idx = elems.indexOf("toolId") + 1;
            var currentToolId = elems[idx];
            if(currentToolId.indexOf(".html") != -1){
                currentToolId = currentToolId.split('.')[0];
            }

            //获取服务端发送的数据
            var rs = JSON.parse(evt.data);


            if(rs.type == "edit") {
                $('#' + rs.id).val(rs.info);

                var ele = $('#' + rs.id);
                autoTextarea(ele[0]);
            }
            else if(rs.type == "add" && rs.toolId == currentToolId){

                var r = rs.newRecord;

                appendRecord_others('msg_'+rs.typeId, r);


                /*toastr.info('其他用户添加了条目，想要查看请刷新~');
                setTimeout(function () {
                    toastr.clear();
                }, 4000);*/

            }
            else if(rs.type == "del" && rs.toolId == currentToolId){
                $('#oneMsg_' + rs.recordId).remove();

                /*toastr.info('其他用户删除了条目，想要查看请刷新~');
                setTimeout(function () {
                    toastr.clear();
                }, 4000);*/
            }
            else if(rs.type == "changePurpose" && rs.toolId == currentToolId){
                $('#newPurpose').val(rs.info);
            }
            else if(rs.type == "changeTargetUser" && rs.toolId == currentToolId){
                $('#newTargetUser').val(rs.info);
            }
            else if(rs.type == "changeGain" && rs.toolId == currentToolId){
                $('#newGain').val(rs.info);
            }
            else if(rs.type == "changePain" && rs.toolId == currentToolId){
                $('#newPain').val(rs.info);
            }
            else if(rs.type == "move" ){
                $("#msg_"+ rs.newTypeId).append($('#' + rs.record));
            }
            else if(rs.type == "pass" && rs.toolId == currentToolId){
                console.log(rs);
            }
            else if(rs.type == "ready" && rs.toolId == currentToolId){
                $('#ready_info_' + rs.userId).html("准备好了！");

                readyMemSize ++;
                isEveryoneReady();
            }
            else if(rs.type == "notReady" && rs.toolId == currentToolId){
                $('#ready_info_' + rs.userId).html("准备中......");

                readyMemSize --;
            }
            else if(rs.type == "addRecordCmt" || rs.type == "delRecordCmt"){
                if(rs.recordId == $('#record_id_for_comment').val()) {
                    showCommentWin(rs.recordId, $('#record_' + rs.recordId).val());
                }
            }

        };

        ws.onclose = function (evt) {          //连接关闭时触发
            console.log("WebSocketClosed!");
            console.log(evt);
        };

        /*——监听代码结束——*/


        var crtRecordId = 0;

        // 防抖
        var debounce = (function () {
            var timeout = null;
            return function() {
                if(timeout !== null){
                    clearTimeout(timeout);
                }
                timeout = setTimeout(function () {
                    editRecord(window.crtRecordId);
                }, 1000);
            }
        })();

        //调用后台编辑函数；更改字数统计div；广播新内容
        function onkeyupForTextarea(recordId){
            var id = "record_" + recordId;

            this.crtRecordId = recordId;
            //不需要显示edit按钮了
            //$('#'+id).next().children('.edit_btn').show();


            // 触发防抖函数(editRecord)
            debounce();


            var newContent = $('#'+id).val().length + "/100";
            $('#text_count_' + recordId).html(newContent );


            var data = new Object();
            data.id = id;
            data.info =$('#'+id).val();
            data.type = "edit";

            //console.log(JSON.stringify(data));
            ws.send(JSON.stringify(data));
        }


        /**
         * @param ele:元素id；r：新record的所有内容
         * */
        function appendRecord_my(ele, r) {
            var tool_type = "<?php echo htmlentities($prjInfo['tool_type']); ?>";


            $('#' + ele).append(' <div id="oneMsg_' + r.id + '"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"\
                onmouseover = "$(\'#del_btn_' + r.id +'\').show();\
                hasRecordCmt('+ r.id + ');\
                $(\'#cmt_btn_' + r.id + '\').show();\
                $(this).css(\'border\',\'none\');"\
                onmouseout="$(\'#del_btn_' + r.id + '\').hide();$(\'#cmt_btn_' + r.id+'\').hide();$(this).css(\'border\',\'none\')" >\
                <div class="oneMsg"  >\
                <?php if($prjInfo['tool_type'] == '共感图'): ?>\
                <div class="tooltip_bottom" style="float:none;">\
                    <div id="progress_div_' + r.id + '" style="width: 300px;">\
                        <el-progress id="progress_' + r.id + '" :color="color" :percentage="(' + r.adopt_count + '/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>\
                    </div>\
                    <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>\
                </div>\
                <?php endif; ?>\
                <?php if($prjInfo['tool_type'] == 'HMW'): ?>\
            <div style="border:1px solid lightgray;">\
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>\
                </div>\
                <?php endif; ?>\
                <textarea  maxlength="100" id="record_' + r.id + '"  onclick="$(this).css(\'cursor\',\'text\')" onblur="$(this).css(\'cursor\',\'move\')" style="border:none;cursor: move;" oninput="onkeyupForTextarea(' + r.id +')" class="record_area">' + r.contents + '</textarea>\
                <div id="text_count_' + r.id + '" class="text_count" >\
                 ' + r.contents.length +'/100\
                </div>\
<block class="btn_block">\
    <div class="del_btn" id="del_btn_' + r.id + '" onclick="delRecord(\'<?php echo htmlentities($toolId); ?>\', ' + r.id +') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;color: red;">\
    <img onmouseover="$(this).parents(\'.del_btn\').css(\'background-color\', \'#e3b3b5\');"\
         onmouseout="$(this).parents(\'.del_btn\').css(\'background-color\', \'inherit\');"\
            style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>\
    </div>\
    <div class="cmt_btn" id="cmt_btn_' + r.id + '" onclick="showCommentWin(' + r.id +',$(\'#record_' + r.id + '\').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">\
    <img onmouseover="$(this).parents(\'.cmt_btn\').css(\'background-color\', \'#e6e6e6\');"\
            onmouseout="$(this).parents(\'.cmt_btn\').css(\'background-color\', \'inherit\');"\
            style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>\
    </div>\
    </block>\
    </div>\
    </div>\
');


            //0秒后加载progress div
            setTimeout(function () {
                autoTextarea($('#record_' + r.id)[0]);

                if(tool_type == "共感图") {
                    new Vue({
                        el: '#progress_div_' + r.id,
                        data: function () {
                            return {}
                        },
                        methods: {
                            format(percentage) {
                                return r.adopt_count + "/ <?php echo htmlentities($memberSize); ?>";
                                //return percentage > 50 ? '满' : `${percentage}%`;
                            },
                            color(percentage){
                                return percentage > 50 ? 'green' : 'yellow';
                            }
                        }
                    });
                }
            }, 0);

        }

        /**
         * @param ele:元素id；r：新record的所有内容
         * */
        function appendRecord_others(ele, r) {
            $('#' + ele).append('\
                <div id="oneMsg_' + r.id + '" style="float: left;margin:0 0 10px 30px;"\
                onmouseover = "$(\'#pass_btn_' + r.id + '\').show();hasRecordCmt(' + r.id + ');$(\'#cmt_btn_' + r.id + '\').show();"\
                onmouseout="$(\'#pass_btn_' + r.id +'\').hide();$(\'#cmt_btn_' + r.id + '\').hide();">\
                    <div style="position: relative;height: 100px;" class="oneMsg">\
                    <?php if($prjInfo['tool_type'] == '共感图'): ?>\
                    <div class="tooltip_bottom" style="float:none;">\
                        <div id="progress_div_' + r.id + '" >\
                            <el-progress id="progress_' + r.id + '" style="width: 300px;"\
            :color="color" :percentage="percentage"  :format="format" ></el-progress>\
                            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);" id="record_' + r.id + '" class="record_area" >' + r.contents + '</textarea>\
     \
                             <div class="btn_block">\
                                 <div class="pass_btn" id="pass_btn_' + r.id + '" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">\
                                     <img onmouseover="$(this).parents(\'.pass_btn\').css(\'background-color\', \'#dfffda\');"\
                                          onmouseout="$(this).parents(\'.pass_btn\').css(\'background-color\', \'inherit\');"\
                                          class="pass_img" alt="pass" style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>\
                                 </div>\
                                 <div class="cmt_btn" id="cmt_btn_' + r.id + '" onclick="showCommentWin(' + r.id + ',$(\'#record_' + r.id +'\').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">\
                                     <img onmouseover="$(this).parents(\'.cmt_btn\').css(\'background-color\', \'#e6e6e6\');"\
                                          onmouseout="$(this).parents(\'.cmt_btn\').css(\'background-color\', \'inherit\');"\
                                          style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>\
                                 </div>\
                             </div>\
                         </div>\
                         <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">\
                            "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>\
                            图标\
                        </div>\
                      </div>\
                      <?php else: ?>\
                        <?php if($prjInfo['tool_type'] == 'HMW'): ?>\
                            <div style="border:1px solid lightgray;">\
                                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>\
                            </div>\
                        <?php endif; ?>\
                         <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);" id="record_' + r.id + '" class="record_area" >' + r.contents + '</textarea>\
                         <div class="btn_block">\
                            <div class="cmt_btn" id="cmt_btn_' + r.id + '" onclick="showCommentWin(' + r.id + ',$(\'#record_' + r.id + '\').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">\
                                <img onmouseover="$(this).parents(\'.cmt_btn\').css(\'background-color\', \'#e6e6e6\');"\
                                     onmouseout="$(this).parents(\'.cmt_btn\').css(\'background-color\', \'inherit\');"\
                                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>\
                            </div>\
                         </div>\
                      <?php endif; ?>\
                      </div>\
                 </div>         ');


            var tool_type = "<?php echo htmlentities($prjInfo['tool_type']); ?>";

            setTimeout(function () {
                if(tool_type == "共感图") {
                    var vm = new Vue({
                        el: '#progress_div_'+r.id,
                        data: {
                            crt_adopt_count: r.adopt_count,
                        },
                        computed: {
                            // 计算属性的 getter
                            percentage: function () {
                                return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                            },
                        },
                        methods: {
                            format() {
                                return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                            },
                            color(){
                                return this.percentage > 50 ? 'green' : 'yellow';
                            },
                            passSelection(){
                                var recordId = r.id;
                                var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                                var _this = this;

                                if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                                    $.ajax({
                                        type: "POST",
                                        url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                        data: {
                                            recordId: recordId,
                                            userId: userId
                                        },
                                        success: function (result) {
                                            $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                            $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                            _this.crt_adopt_count ++;


                                            var data = new Object();
                                            data.id = recordId;
                                            data.info =_this.percentage;
                                            data.type = "pass";

                                            ws.send(JSON.stringify(data));
                                        }
                                    });

                                } else{

                                    $.ajax({
                                        type: "POST",
                                        url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                        data: {
                                            recordId: recordId,
                                            userId: userId
                                        },
                                        success: function (result) {
                                            $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                            $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                            _this.crt_adopt_count --;
                                        }
                                    });
                                }
                            }
                        }
                    });

                }
            }, 0);

        }

        function addRecord(toolId, typeId,userId) {
            $.ajax({
                type:"POST",
                url:"http://localhost/tp5/public/index.php/index/index/addRecordToBC",
                data: {toolId: toolId,
                    recordTypeId: typeId,
                    content: '',
                    userId: userId
                },
                xhrFields: {
                    withCredentials: true
                },
                //crossDomain: true,
                success:function (result) {
                    //console.log(result);
                    //window.location.reload();

                    var r = result.newRecord;
                    appendRecord_my('msg_'+result.typeId, r);


                    var data = new Object();
                    data.type = "add";
                    data.toolId = toolId;
                    data.recordId = result.recordId;
                    data.typeId = result.typeId;
                    data.newRecord = result.newRecord;
                    ws.send(JSON.stringify(data));
                }
            })
        }

        function editRecord( record_id){
            var value = $('#record_'+ record_id).val();

            $('#auto_save').text('自动保存中...');

            //insert into database

            $.ajax({
                type:"POST",
                url:"http://localhost/tp5/public/index.php/index/index/editRecord",
                data: {
                    id: record_id,
                    newRecord: value
                },
                success:function (result) {
                    setTimeout(function () {
                        $('#auto_save').text('√自动保存成功');
                    }, 1000);


                    /*
                    if(haveEditedRecords.indexOf(record_id) == -1) {
                        haveEditedRecords.push(record_id);
                    }*/

                    //$('#edit_btn_'+ record_id).hide();

                    /*$('#autoSave_'+ record_id).show();

                    setTimeout(function () {
                        $('#autoSave_'+ record_id).hide();
                    }, 3000);*/


                    /*
                     $('#checkmark_' + record_id).show();
                     setTimeout(function () {
                     $('#checkmark_' + record_id).hide();
                     },2000);*/
                }
            })
        }

        function delRecord(toolId, id){

            //if(confirm("确认删除该条记录吗？") == true) {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/delRecordFromBC",
                data: {
                    id: id,
                    //toolId: toolId
                },
                success: function (result) {
                    //console.log(result);
                    //window.location.reload();

                    $('#oneMsg_' + id).remove();

                    toastr.info('删除的便利贴可在右上方回收站找回~');
                     setTimeout(function () {
                     toastr.clear();
                     }, 4000);


                    var data = new Object();
                    data.type = "del";
                    data.toolId = toolId;
                    data.recordId = id;
                    ws.send(JSON.stringify(data));
                }
            })
            //}
        }

        function revertRecord(id) {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/revertRecord",
                data: {
                    id: id
                },
                success: function (result) {
                    //console.log(result);
                    //window.location.reload();

                    appendRecord_my('msg_'+result.type_id, result);

                    showRecycleWin();

                    var data = new Object();
                    data.type = "add";
                    data.toolId = '<?php echo htmlentities($toolId); ?>';
                    data.recordId = id;
                    data.typeId = result.type_id;
                    data.newRecord = result;
                    ws.send(JSON.stringify(data));
                }
            })
        }


        function favorColorSelection(recordId, likeCount,dislikeCount) {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/getLikeRelativeColor",
                data: {
                    likeCount:likeCount,
                    dislikeCount:dislikeCount,
                    threshold: 5
                },
                success: function (result) {
                    //console.log(result);
                    $('#like_color_' + recordId).css('background-color',result);
                }
            })
        }


        function likeSelection(ele, recordId) {

            if($(ele).attr('alt') == 'like_before' && $(ele).siblings('.dislike_selection').attr('alt') == 'dislike_before'){
                likeOrDislikeRecord(recordId,'<?php echo htmlentities($_COOKIE['user']); ?>', 'like');
                $(ele).attr('alt','like_after');
                $(ele).attr('src','http://localhost/tp5/public/img/like_after.png');

                var like_count = $(ele).siblings('.like_count').text();

                var new_like_count = '(' + (parseInt(like_count.substring(1,like_count.length - 1)) + 1) + ')';
                $(ele).siblings('.like_count').html(new_like_count);


                //即时更改颜色
                var dislike_count = $(ele).siblings('.dislike_count').text();
                favorColorSelection(recordId, parseInt(new_like_count.substring(1,new_like_count.length - 1)), parseInt(dislike_count.substring(1,dislike_count.length - 1)));
            }else if($(ele).attr('alt') == 'like_after'){
                cancelLikeOrDislikeRecord(recordId,'<?php echo htmlentities($_COOKIE['user']); ?>', 'like');
                $(ele).attr('alt','like_before');
                $(ele).attr('src','http://localhost/tp5/public/img/like_before.png');

                var like_count = $(ele).siblings('.like_count').text();

                var new_like_count = '(' + (parseInt(like_count.substring(1,like_count.length - 1)) - 1) + ')';
                $(ele).siblings('.like_count').html(new_like_count);


                //即时更改颜色
                var dislike_count = $(ele).siblings('.dislike_count').text();
                favorColorSelection(recordId, parseInt(new_like_count.substring(1,new_like_count.length - 1)), parseInt(dislike_count.substring(1,dislike_count.length - 1)));

            }
        }

        function dislikeSelection(ele, recordId) {
            if($(ele).attr('alt') == 'dislike_before' && $(ele).siblings('.like_selection').attr('alt') == 'like_before'){
                likeOrDislikeRecord(recordId,'<?php echo htmlentities($_COOKIE['user']); ?>', 'dislike');
                $(ele).attr('alt','dislike_after');
                $(ele).attr('src','http://localhost/tp5/public/img/dislike_after.png');

                var dislike_count = $(ele).siblings('.dislike_count').text();

                var new_dislike_count = '(' + (parseInt(dislike_count.substring(1,dislike_count.length - 1)) + 1) + ')';
                $(ele).siblings('.dislike_count').html(new_dislike_count);


                //即时更改颜色
                var like_count = $(ele).siblings('.like_count').text();
                favorColorSelection(recordId, parseInt(like_count.substring(1,like_count.length - 1)), parseInt(new_dislike_count.substring(1,new_dislike_count.length - 1)));

            }else if($(ele).attr('alt') == 'dislike_after'){
                cancelLikeOrDislikeRecord(recordId,'<?php echo htmlentities($_COOKIE['user']); ?>', 'dislike');
                $(ele).attr('alt','dislike_before');
                $(ele).attr('src','http://localhost/tp5/public/img/dislike_before.png');

                var dislike_count = $(ele).siblings('.dislike_count').text();

                var new_dislike_count = '(' + (parseInt(dislike_count.substring(1,dislike_count.length - 1)) - 1) + ')';
                $(ele).siblings('.dislike_count').html(new_dislike_count);


                //即时更改颜色
                var like_count = $(ele).siblings('.like_count').text();
                favorColorSelection(recordId, parseInt(like_count.substring(1,like_count.length - 1)), parseInt(new_dislike_count.substring(1,new_dislike_count.length - 1)));

            }
        }


        function likeOrDislikeRecord(recordId, userId, type) {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/likeOrDislikeRecord",
                data: {
                    recordId: recordId,
                    userId: userId,
                    like_or_dislike: type
                },
                success: function (result) {
                    //console.log(result);
                    //window.location.reload();

                }
            })
        }

        function cancelLikeOrDislikeRecord(recordId, userId, type) {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/cancelLikeOrDislikeRecord",
                data: {
                    recordId: recordId,
                    userId: userId,
                    like_or_dislike: type
                },
                success: function (result) {
                    //console.log(result);
                    //window.location.reload();

                }
            })
        }



        function changeTextareaColor(ele){
            var new_color = $(ele).css('background-color');
            //console.log(new_color);
            var area = $(ele).parent('.color_panel').parent().children('.oneMsg').children('.record_area');
            var record_id = $(area).attr('id').split('_')[1];

            $(area).css({'background-color': new_color}) ;

            $.ajax({
                type:"POST",
                url:"http://localhost/tp5/public/index.php/index/index/changeRecordColor",
                data: {
                    id: record_id,
                    color: new_color
                },
                success:function (result) {
                    //console.log(result);
                }
            });
        }


        function makeCanvasPublic(toolId) {
            $.ajax({
                type:"POST",
                url:"http://localhost/tp5/public/index.php/index/index/makeCanvasPublic",
                data: {
                    toolId: toolId
                },
                success:function (result) {
                    toastr.success('此画布已经放入创意社区，可以点击最上方按钮查看啦');
                    setTimeout(function () {
                        toastr.clear();
                    }, 4000);
                }
            });
        }



        function makeCanvasPrivate(toolId) {
            $.ajax({
                type:"POST",
                url:"http://localhost/tp5/public/index.php/index/index/makeCanvasPrivate",
                data: {
                    toolId: toolId
                },
                success:function (result) {
                    toastr.success('此画布已经从创意社区中移除，可重新公开');
                    setTimeout(function () {
                        toastr.clear();
                    }, 4000);
                }
            });
        }

        /**
         * 文本框根据输入内容自适应高度
         * @param                {HTMLElement}        输入框元素
         * @param                {Number}                设置光标与输入框保持的距离(默认0)
         * @param                {Number}                设置最大高度(可选)
         */
        var autoTextarea = function (elem, extra, maxHeight) {
            extra = extra || 0;
            var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                    elem.addEventListener ?
                        elem.addEventListener(type, callback, false) :
                        elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                    var val = elem.currentStyle[name];

                    if (name === 'height' && val.search(/px/i) !== 1) {
                        var rect = elem.getBoundingClientRect();
                        return rect.bottom - rect.top -
                            parseFloat(getStyle('paddingTop')) -
                            parseFloat(getStyle('paddingBottom')) + 'px';
                    };

                    return val;
                } : function (name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));

            elem.style.resize = 'none';

            var change = function () {
                var scrollTop, height,
                    padding = 0,
                    style = elem.style;

                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;

                if (!isFirefox && !isOpera) {
                    padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                //scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                    if (maxHeight && elem.scrollHeight > maxHeight) {
                        height = maxHeight - padding;
                        style.overflowY = 'auto';
                    } else {
                        height = elem.scrollHeight - padding;
                        style.overflowY = 'hidden';
                    };
                    style.height = height + extra + 'px';
                    //scrollTop += parseInt(style.height) - elem.currHeight;
                    //document.body.scrollTop = scrollTop;
                    //document.documentElement.scrollTop = scrollTop;
                    elem.currHeight = parseInt(style.height);
                };
            };

            addEvent('propertychange', change);
            addEvent('input', change);
            addEvent('focus', change);
            change();
        };


        function canvasScreenShoot() {
            html2canvas(document.querySelector("#wholeCanvas")).then(canvas => {

                $('body').html('<b style="color:red;font-size: 30px;">在以下画布区域右键“图片另存为”保存图片，重新编辑画布请刷新</b><br/><br/><br/><br/>');
                document.body.appendChild( canvas );

            });
        }

        function goBackToTools(prjId) {
            window.location.href = "http://localhost/tp5/public/index.php/index/index/getTools/prjId/" + prjId;
        }

        function checkChangePurpose() {
            var new_purpose = $('#new_purpose').val();

            var re = new RegExp("^[ ]+$");

            if(! re.test(new_purpose) && new_purpose != "" && new_purpose != null ) {
                window.location.reload();

                return true;
            }

            toastr.error('目标不能为空或空格！');
            setTimeout(function () {
                toastr.clear();
            }, 2000);
            return false;
        }

        function checkChangeTargetUser() {
            var new_user = $('#newTargetUser').val();

            var re = new RegExp("^[ ]+$");

            if(! re.test(new_user) && new_user != "" && new_user != null ) {
                window.location.reload();

                return true;
            }

            toastr.error('目标用户不能为空或空格！');
            setTimeout(function () {
                toastr.clear();
            }, 2000);
            return false;
        }

        /*function exportRecords(toolId){
         $.post('http://localhost/tp5/public/index.php/index/index/exportRecords',{toolId: toolId},function (data) {
         console.log(data);
         });
         }*/


        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        function drag(ev)
        {
            //console.log(ev.target);


            if($(ev.target).hasClass('record_area')){
                return;
            }
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");

            //console.log(ev.target);

            var ele = $(ev.target).parents('.msg');
            var ele_other = $(ev.target).children('.msg');//有可能拖到条目下空余的typeBlock的div区域



            var typeEleId = null;
            if(ele.length >0 ) {
                $(ele).append($('#' + data));

                typeEleId = $(ele).parents('.typeBlock').attr('id');
            }else if(ele_other.length >0 ) {
                $(ele_other).append($('#' + data));

                typeEleId = $(ele_other).parents('.typeBlock').attr('id');
            }else{
                return;
            }


            var recordId = data.split('_')[data.split('_').length - 1];
            var newTypeId = typeEleId.split('_')[typeEleId.split('_').length - 1];


            changeRecordType(recordId, newTypeId);

            var transData = new Object();
            transData.record = data;
            transData.newTypeId =newTypeId;
            transData.type = "move";

            ws.send(JSON.stringify(transData));
        }


        function changeRecordType(recordId, newTypeId) {
            $.ajax({
                type:"POST",
                url:"http://localhost/tp5/public/index.php/index/index/changeRecordType",
                data: {
                    recordId: recordId,
                    newTypeId: newTypeId
                },
                success:function (result) {
                    //console.log(result);
                }
            });
        }

        function showRecycleWin() {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/getDeletedRecords",
                data: {
                    toolId: '<?php echo htmlentities($toolId); ?>'
                },
                success: function (result) {
                    //console.log(result);

                    //var crtUser = '<?php echo htmlentities($_COOKIE["user"]); ?>';
                    $('#recycle_bin_window').empty();


                    if(result.length == 0){
                        $('#recycle_bin_window').append('<div id="recycle_null" style="position:absolute;top: 40%;left:45%;">NULL</div>');

                    }else {
                        for (var i = 0; i < result.length; i++) {

                            if(result[i].type_id == 0){
                                result[i].type_name = "未分类";
                            }

                            $('#recycle_bin_window').append('\
                            <div style="position:relative;margin: 6%;border: solid 0.5px;min-height: 50px;">\
                                <div style="font-size: 14px;font-style: italic;">\
                                    ' + result[i].type_name + '\
                                </div>\
                                <div style="word-break: break-word;margin-top: 7%;">' + result[i].contents + '</div>\
                                <div onclick="revertRecord(' + result[i].id + ')" style="position:absolute;top:2%;right:5%;color: red;font-size: 12px;cursor: pointer;">\
                                    --恢复--\
                                </div>\
                            </div>\
                            ');

                        }
                    }
                }
            });



            $('#recycle_bin_window').show();
        }

        function hasRecordCmt(recordId) {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/getRecordComments",
                data: {
                    recordId: recordId
                },
                success: function (result) {
                    //console.log(result);

                    if(result.length > 0){
                        $('#cmt_btn_' + recordId).children('img').attr('src','http://localhost/tp5/public/img/comment_exist.png');
                    }else{
                        $('#cmt_btn_' + recordId).children('img').attr('src','http://localhost/tp5/public/img/comment.png');
                    }
                }
            });

        }

        function showCommentWin(recordId,contents) {

            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/getRecordComments",
                data: {
                    recordId: recordId
                },
                success: function (result) {
                    //console.log(result);

                    var crtUser = '<?php echo htmlentities($_COOKIE["user"]); ?>';
                    $('#show_comments_div').empty();


                    for(var i=0; i < result.length; i++) {

                        if(crtUser == result[i].user_id) {
                            $('#show_comments_div').append(
                                '<div onmouseover="$(\'#cmt_time_' + i + '\').hide();$(\'#del_cmt' + i + '\').show();" \
                            onmouseout="$(\'#cmt_time_' + i + '\').show();$(\'#del_cmt' + i + '\').hide();" \
                            style="font-size:12px;padding-top: 11px;padding-bottom: 4px;"> \
                            <div>\
                                <span style="color: #a2a2a2">' + result[i].usr_name + '</span>\
                                <span id="cmt_time_' + i + '"style="margin-left:10px;color: #cccccc">' + result[i].time + '</span>\
                                <span id="del_cmt' + i + '" onclick="delCmtConfirm(' + result[i].id + ');" style="display:none;cursor:pointer;margin-left:10px;color: red">删除</span>\
                            </div>\
                            <div>\
                                <span style="margin-top:5px;word-break:break-word;">' + result[i].contents + '</span>\
                            </div>\
                         </div>'
                            );
                        }else{
                            $('#show_comments_div').append(
                                '<div style="font-size:12px;padding-top: 11px;padding-bottom: 4px;"> \
                            <div>\
                                <span style="color: #a2a2a2">' + result[i].usr_name + '</span>\
                                <span id="cmt_time_' + i + '"style="margin-left:10px;color: #cccccc">' + result[i].time + '</span>\
                            </div>\
                            <div>\
                                <span style="margin-top:5px;word-break:break-word;">' + result[i].contents + '</span>\
                            </div>\
                         </div>'
                            );
                        }
                    }
                }
            });


            $('#record_id_for_comment').val(recordId);
            $('#record_contents_for_comment').html('"' + contents + '"');
            $('#comments_window').show();
        }

        function sendRecordComments() {
            var re = new RegExp("^[ ]+$");
            var new_comment = $('#new_comment').val();

            if(! re.test(new_comment) && new_comment != "" && new_comment != null ) {
                $.ajax({
                    type: "POST",
                    url: "http://localhost/tp5/public/index.php/index/index/addRecordComment",
                    data: {
                        userId: "<?php echo htmlentities($_COOKIE['user']); ?>",
                        recordId: $('#record_id_for_comment').val(),
                        contents: new_comment
                    },
                    success: function (result) {
                        //console.log(result);

                        showCommentWin($('#record_id_for_comment').val(), $('#record_contents_for_comment').text());
                        $('#new_comment').val('');

                        var data = new Object();
                        data.recordId = $('#record_id_for_comment').val();
                        data.type = "addRecordCmt";

                        ws.send(JSON.stringify(data));
                    }
                })
            }
        }


        function delCmtConfirm(cmtId) {
            $('#showdiv_delCmt').show();
            $('#cover').css('display','block'); //显示遮罩层
            $('#cover').css('height','100%');

            $('#cmt_id_for_del').val(cmtId);
        }


        function delRecordCmt(cmtId) {
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/delRecordCmt",
                data: {
                    cmtId: cmtId
                },
                success: function (result) {
                    //console.log(result);

                    showCommentWin($('#record_id_for_comment').val(), $('#record_contents_for_comment').text());

                    var data = new Object();
                    data.recordId = $('#record_id_for_comment').val();
                    data.type = "delRecordCmt";

                    ws.send(JSON.stringify(data));
                }
            })
        }

    </script>

<script>
    //DOM渲染完毕再执行以使用选择器
    setTimeout(function () {
        if (window.location.href.split(/[/.]/).indexOf('ques') > 0) {
            $('.extraInfoInput').each(function (idx,ele) {
                $(ele).attr('readonly', 'readonly');
            });
        }
    },0);

</script>

    <!--粒子时钟转载自：https://www.cnblogs.com/xiaohuochai/p/6368039.html-->
    <script>
        var canvas = document.getElementById('clock_canvas');
        if(canvas.getContext){
            var cxt = canvas.getContext('2d');
            canvas.height = 100;
            canvas.width = 700;
            function renderDigit(index,num){
                var R = canvas.height/20-1;
                for(var i = 0; i < digit[num].length; i++){
                    for(var j = 0; j < digit[num][i].length; j++){
                        if(digit[num][i][j] == 1){
                            cxt.beginPath();
                            cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                            cxt.closePath();
                            cxt.fill();
                        }
                    }
                }
            }
            function digitTime(){
                /*获取时间数据*/
                var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
                //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
                var data = [];
                data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
                /*渲染时钟*/
                //重置画布宽度，达到清空画布的效果
                canvas.height = 100;
                for(var i = 0; i < data.length; i++){
                    renderDigit(i,data[i]);
                }
            }
            digitTime();
            clearInterval(oTimer);
            var oTimer = setInterval(function(){
                digitTime();
            },500);
        }
    </script>




<div style="width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 200px;position: relative;margin-left: 45%;">
        商业模式画布

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="http://localhost/tp5/public/img/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">用于将商业模式中的9个元素（价值主张、关键业务等）标准化，并强调元素间的相互作用，很好的体现了系统观的思维模式。
            </span>
        </div>

    </div>
</div>

<!--第一行表格-->
<div style="display:table;min-height:400px;margin-left: 20px;margin-top: 10px;width: 1250px;clear: both;">

    <!--1.重要伙伴-->
    <div class="typeBlock" >
        <div class="title">
            <text>重要伙伴</text>
            <div class="tooltip ">
                <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',1,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                    <img src="http://localhost/tp5/public/img/add_record.png">
                </div>


                <span class="tooltiptext">重要伙伴
                </span>

            </div>

        </div>


        <div class="msg" id="msg_1">
            <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '重要伙伴'): ?>

                <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>







            <?php endif; ?>
            <?php endforeach; endif; else: echo "" ;endif; ?>

        </div>
    </div>

    <!--2.关键业务；3.核心资源-->
    <div class="typeBlock">
        <div style="height: auto;min-height: 200px;">


            <div class="title">
            <text>关键业务</text>

                <div class="tooltip ">
                    <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',2,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                        <img src="http://localhost/tp5/public/img/add_record.png">
                    </div>


                    <span class="tooltiptext">。。。
                </span>

                </div>

            </div>


        <div class="msg" id="msg_2">
            <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '关键业务'): ?>
                <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>







            <?php endif; ?>
            <?php endforeach; endif; else: echo "" ;endif; ?>
        </div>
        </div>

        <div style="height: auto;min-height:200px;">
            <div class="title">
                <text>核心资源</text>
                <div class="tooltip ">
                    <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',3,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                        <img src="http://localhost/tp5/public/img/add_record.png">
                    </div>


                    <span class="tooltiptext">。。。
                </span>

                </div>

            </div>


            <div class="msg" id="msg_3">
                <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '核心资源'): ?>
                    <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>






                <?php endif; ?>
                <?php endforeach; endif; else: echo "" ;endif; ?>
            </div>
        </div>


    </div>

    <!--4.价值主张-->
    <div class="typeBlock">
        <div class="title">
            <text>价值主张</text>
            <div class="tooltip ">
                <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',4,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                    <img src="http://localhost/tp5/public/img/add_record.png">
                </div>


                <span class="tooltiptext">。。。
                </span>

            </div>

        </div>


        <div class="msg" id="msg_4">
            <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '价值主张'): ?>
                <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>







            <?php endif; ?>
            <?php endforeach; endif; else: echo "" ;endif; ?>

        </div>
    </div>

    <!--5.客户关系；6.渠道通路-->
    <div class="typeBlock">
        <div style="height: auto;min-height: 200px;">


            <div class="title">
                <text>客户关系</text>
                <div class="tooltip ">
                    <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',5,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                        <img src="http://localhost/tp5/public/img/add_record.png">
                    </div>

                    <span class="tooltiptext">。。。
                </span>

                </div>

            </div>


            <div class="msg" id="msg_5">
                <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '客户关系'): ?>
                    <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>






                <?php endif; ?>
                <?php endforeach; endif; else: echo "" ;endif; ?>
            </div>
        </div>

        <div style="height: auto;min-height: 200px;">
            <div class="title">
                <text>渠道通路</text>

                <div class="tooltip ">
                    <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',6,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                        <img src="http://localhost/tp5/public/img/add_record.png">
                    </div>


                    <span class="tooltiptext">。。。
                </span>

                </div>

            </div>


            <div class="msg" id="msg_6">
                <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '渠道通路'): ?>

                    <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>






                <?php endif; ?>
                <?php endforeach; endif; else: echo "" ;endif; ?>
            </div>
        </div>


    </div>

    <!--7.客户细分-->
    <div class="typeBlock">
        <div class="title">
            <text>客户细分</text>
            <div class="tooltip ">
                <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',7,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                    <img src="http://localhost/tp5/public/img/add_record.png">
                </div>


                <span class="tooltiptext">。。。
                </span>

            </div>

        </div>


        <div class="msg" id="msg_7">
            <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '客户细分'): ?>
                <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>






            <?php endif; ?>
            <?php endforeach; endif; else: echo "" ;endif; ?>

        </div>
    </div>

</div>


<!--第二行表格-->
<div style="display:table;min-height:200px;margin-left: 20px;width: 1250px;">
    <!--8.成本结构-->
    <div class="typeBlock">
        <div class="title">
            <text>成本结构</text>
            <div class="tooltip ">
                <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',8,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                    <img src="http://localhost/tp5/public/img/add_record.png">
                </div>


                <span class="tooltiptext">。。。
                </span>

            </div>

        </div>


        <div class="msg" id="msg_8"><!--flex布局-->
            <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '成本结构'): ?>
                <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>






            <?php endif; ?>
            <?php endforeach; endif; else: echo "" ;endif; ?>

        </div>
    </div>

    <!--9.收入来源-->
    <div class="typeBlock">
        <div class="title">
            <text>收入来源</text>

            <div class="tooltip ">
                <div class="addBtn" onclick="addRecord('<?php echo htmlentities($toolId); ?>',9,'<?php echo htmlentities($_COOKIE['user']); ?>')">
                    <img src="http://localhost/tp5/public/img/add_record.png">
                </div>

                <span class="tooltiptext">。。。
                </span>

            </div>

        </div>


        <div class="msg" id="msg_9">
            <?php if(is_array($records) || $records instanceof \think\Collection || $records instanceof \think\Paginator): $i = 0; $__LIST__ = $records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == '收入来源'): ?>
                <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet"/>
<script src="http://localhost/tp5/public/JS/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



<?php if(in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>
<div id="oneMsg_<?php echo htmlentities($r['id']); ?>"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_<?php echo htmlentities($r['id']); ?>').show();
        hasRecordCmt('<?php echo htmlentities($r['id']); ?>');
        $('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        <?php if($prjInfo['tool_type'] == '共感图'): ?>
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" style="width: 300px;">
            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" :color="color" :percentage="(<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>)*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "<?php echo htmlentities($r['adopt_count']); ?>/<?php echo htmlentities($memberSize); ?>";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        <?php endif; if($prjInfo['tool_type'] == 'HMW'): ?>
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        <?php endif; ?>

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_<?php echo htmlentities($r['id']); ?>"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: <?php echo htmlentities($r['color']); ?>" oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>


        <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
            <?php echo iconv_strlen($r['contents']); ?>/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_<?php echo htmlentities($r['id']); ?>" style="display: none" class="edit_btn" onclick="editRecord( '<?php echo htmlentities($r['id']); ?>')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_<?php echo htmlentities($r['id']); ?>" onclick="delRecord('<?php echo htmlentities($toolId); ?>', '<?php echo htmlentities($r['id']); ?>') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_<?php echo htmlentities($r['id']); ?>" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_<?php echo htmlentities($r['id']); ?>" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_<?php echo htmlentities($r['id']); ?>" class="green_checkmark" >
        <img src="http://localhost/tp5/public/img/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

<?php endif; if(!in_array(($r['id']), is_array($edit_records)?$edit_records:explode(',',$edit_records))): ?>

<div id="oneMsg_<?php echo htmlentities($r['id']); ?>" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_<?php echo htmlentities($r['id']); ?>').show();hasRecordCmt('<?php echo htmlentities($r['id']); ?>');$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').show();"
     onmouseout="$('#pass_btn_<?php echo htmlentities($r['id']); ?>').hide();$('#cmt_btn_<?php echo htmlentities($r['id']); ?>').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        <?php if($prjInfo['tool_type'] == '共感图'): ?>

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_<?php echo htmlentities($r['id']); ?>" >



            <el-progress id="progress_<?php echo htmlentities($r['id']); ?>" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_<?php echo htmlentities($r['id']); ?>" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <?php if(!in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo.png"/>
                    <?php endif; if(in_array(($_COOKIE['user']), is_array($r['adopt'])?$r['adopt']:explode(',',$r['adopt']))): ?>
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="http://localhost/tp5/public/img/tongguo_selected.png"/>
                    <?php endif; ?>
                </div>

                <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_<?php echo htmlentities($r['id']); ?>',
                data: {
                    crt_adopt_count: '<?php echo htmlentities($r['adopt_count']); ?>',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'<?php echo htmlentities($memberSize); ?>')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/<?php echo htmlentities($memberSize); ?>' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '<?php echo htmlentities($r['id']); ?>';
                        var userId = "<?php echo htmlentities($_COOKIE['user']); ?>";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "http://localhost/tp5/public/index.php/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','http://localhost/tp5/public/img/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="http://localhost/tp5/public/img/tongguo.png"/>
                图标
            </div>


        </div>



        <?php else: if($prjInfo['tool_type'] == 'HMW'): ?>
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            <?php endif; ?>


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_<?php echo htmlentities($r['id']); ?>" class="record_area" ><?php echo htmlentities($r['contents']); ?></textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_<?php echo htmlentities($r['id']); ?>" onclick="showCommentWin('<?php echo htmlentities($r['id']); ?>',$('#record_<?php echo htmlentities($r['id']); ?>').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="http://localhost/tp5/public/img/comment.png"/>
            </div>

        </div>
        <?php endif; ?>


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('http://localhost/tp5/public/img/user_tag.jpg')*/">
            <p >〇&nbsp;<b><?php echo htmlentities($r['usr_name']); ?></b></p>
        </div>-->


        </div>
</div>

<?php endif; ?>






            <?php endif; ?>
            <?php endforeach; endif; else: echo "" ;endif; ?>

        </div>
    </div>

</div>


</div><!--closing tag for wholeCanvas div-->



<script>
    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);


</script>
 <head>
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/float_window.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/tools.css" />
    <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet" />
    <script src="http://localhost/tp5/public/JS/toastr.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/bootcssButtons.css" />


    <script>
        function sendFeedback(userId) {
            var feedbackInfo = $('#feedbackInfo').val();
            var re = new RegExp("^[ ]+$");

            if (!re.test(feedbackInfo) && feedbackInfo != "" && feedbackInfo != null) {

                $.post("http://localhost/tp5/public/index.php/index/index/addFeedback", {
                    feedbackInfo: $('#feedbackInfo').val(),
                    userId: userId
                }, function() {
                    //显示一个信息没有标题
                    toastr.success('反馈已成功发送，感谢使用~');
                    setTimeout(function() {
                        toastr.clear();
                    }, 2000);
                });
            } else {
                toastr.error('反馈不能为空~');
                setTimeout(function() {
                    toastr.clear();
                }, 2000);
            }
        }

        function showFeedback() {
            $('#showdiv_F').show(); //显示弹窗
            $('#cover_F').css('display', 'block'); //显示遮罩层
            $('#cover_F').css('height', '100%'); //设置遮罩层的高度为当前页面高度
        }

        // 关闭弹窗
        function closeFeedback() {
            $('#showdiv_F').hide(); //隐藏弹窗
            $('#cover_F').css('display', 'none'); //隐藏遮罩层
        }
    </script>
</head>

<body>

    <!--<div style="height:1000px;"></div>-->

    <div class="guide">
        <div class="guide-wrap">
            <!--<a href="#" class="edit" title="发新帖"><span>发新帖</span></a>
        <a href="#" class="find" title="找论坛"><span>找论坛</span></a>-->
            <?php if(isset($_COOKIE['user'])): ?>
            <a href="javascript:showFeedback()" class="report" title="反馈"><span>反馈</span></a> <?php endif; ?>
            <a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a>
        </div>
    </div>



    <?php if(isset($_COOKIE['user'])): ?>

    <!--以下为添加反馈时的弹窗相关-->
    <!-- 遮罩层 -->
    <div id="cover_F" class="cover"></div>
    <!-- 弹窗 -->
    <div id="showdiv_F" class="showdiv" style="height: 250px;">
        <!-- 标题 -->
        <div class="showdiv_title">
            意见和反馈
        </div>
        <!-- 内容 -->
        <div class="showdiv_prompt">
            请留下您的宝贵意见或反馈：

            <div>
                <textarea required id="feedbackInfo" style="height: 100px;width: 400px;margin-top: 20px;"></textarea>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="button button-medium " onclick="closeFeedback()" style="position: absolute;left: 25%;top: 80%;">
            取消</div>
        <div id="next_step_btn" onclick="sendFeedback('<?php echo htmlentities($_COOKIE['user']); ?>')" class="button button-action button-medium" style="position:absolute;left: 50%;top: 80%;">
            发送</div>

    </div>

    <?php endif; ?>

</body>

    </div>
    <div class="footer">
        <style>
    a {
        text-decoration: none;
        color: #aaabab;
        text-decoration: none;
    }
    
    a:hover {
        color: #647BFF;
        text-decoration: none;
    }
</style>

<div style="font-size:18px;background-color: #f9f9f9;color:#aaabab;width:100%;/*padding: 20px 0;*/text-align: center;">
    Copyright © <a href="http://localhost/tp5/public/index.php">火花设计思维分享</a> 京ICP备19028873号-1
</div>
    </div>
</div>



<script>
    // 此处应修改，不能直接操作innerHTML，不然echarts绘图空白
    // var s = document.body.innerHTML;
    // s = s.replace(/商业/g, '产业');
    // document.body.innerHTML = s;
</script>


<style>
    * {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    .my_container {
        min-height: 600px;
        padding-bottom: -25px;
        min-width: 925px;
    }
    
    .my_container::after {
        content: "";
        clear: both;
        display: block;
    }
    
    .footer {
        height: 25px;
        min-width: 925px;
    }
    
    button {
        margin-left: 10px;
        border-radius: 20px;
        padding: 12px 23px;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        font-size: 14px;
        font-family: inherit;
        -webkit-writing-mode: horizontal-tb;
        text-rendering: auto;
    }
    
    button:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }
</style>